<template>
	<view style="text-align: center;font-weight: 600;font-size: 1.2rem;margin: 20rpx 0;">核销列表</view>
	<view style="margin: 0 auto; width: 90vw;padding-bottom: 50rpx;">
		<template v-for="(item,index) in dataList" :key="index">
			<view class="card_wrapper" @click="goOrderTo(item.id)">
				<view class="card_header">
					<view class="card_info">
						<view class="card_title">
							{{item.productName}}
						</view>
						<view class="card_people_info">
							<p>成人票价：{{item.adultPrice}}元</p>
							<p>老人小孩票价：{{item.childPrice}}元</p>
						</view>
						<view class="card_dateTime">
							创建时间：{{item.createTime}}
						</view>
					</view>
					<view class="card_image">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card_foot">
					<view class="card_foot-item">
						<span :style="{
								color: item.status == 0 ? '#eab906' : 
										 item.status == 1 ? 'skyblue' : 
										 item.status == 2 ? 'red' : 'green'
								}">
							{{ item.status == 0 ? '待付款' : item.status == 1 ? '待出行' : item.status == 2 ? '已取消' : '已完成' }}
						</span>
					</view>
					<view class="card_foot-item">
						<span @click.stop="onContract(item.id)">查看合同</span>
					</view>
				</view>
			</view>
		</template>
		<view v-if="dataList.length == 0" style="text-align: center;">
			暂无更多数据
		</view>
		<!-- <orders-vue :dataList="dataList" :status="paging.value.status"></orders-vue> -->
	</view>
</template>

<script setup>
	import ordersVue from '@/component/trip/orders.vue';
	import { useGlobalStore } from '@/stores/global.js'
	import { onReachBottom, onLoad } from '@dcloudio/uni-app'
	import { getOrderInfoList } from '@/api/order';
	import { ref } from 'vue';

	const store = useGlobalStore();  
	const dataList = ref([])
	const status = ref(-1)
	const paging = ref({
		status:3,
		currentPage:1,
		totalPages:1,
		pageSize:10
	})

	onLoad(() => {
		getOrderList(paging.value.currentPage);
	})
	
	async function onContract(id) {
		uni.navigateTo({
			url: `/pages/trip/contract/contract?id=${id}`
		})
	}
	
	function goOrderTo(id) {
		uni.navigateTo({
			url: `/pages/trip/detail/orderInfo?id=${id}`
		})
	}
	
	onReachBottom(()=>{
		if(paging.value.currentPage < paging.value.totalPages){
			paging.value.currentPage++
		}
		getOrderList(paging.value.currentPage);
	})
	
	async function getOrderList(pageNum){
		let { data } = await getOrderInfoList(pageNum, paging.value.pageSize, paging.value.status);
		dataList.value = [...dataList.value, ...data.records];
		paging.value.totalPages = Math.ceil(data.total / paging.value.pageSize);
	}
</script>

<style>
	/* 卡片容器 */
	.card-container {
		margin: 20rpx;
	}
	
	.card_wrapper {
		background-color: #fff;
		border-radius: 16rpx;
		/* 圆角边框 */
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		/* 阴影效果 */
		overflow: hidden;
		/* 确保内容不超出圆角 */
		margin-top: 25rpx;
	}
	
	/* 卡片头部 - 左右布局 */
	.card_header {
		display: flex;
		flex-direction: row;
		padding: 0rpx;
	}
	
	/* 左侧信息区域 - 占55%宽度 */
	.card_info {
		flex: 0 0 55%;
		max-width: 55%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 15rpx;
	}
	
	.card_title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
	}
	
	.card_people_info {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}
	
	.card_dateTime {
		font-size: 24rpx;
		color: #999;
	}
	
	/* 右侧图片区域 - 占45%宽度 */
	.card_image {
		flex: 0 0 45%;
		max-width: 45%;
		height: 232rpx;
		/* 新增固定高度 */
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.card_image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持图片比例并填充容器 */
	}
	
	/* 卡片底部 - 两端对齐 */
	.card_foot {
		display: flex;
		justify-content: space-between;
		/* 两端对齐 */
		align-items: center;
		padding: 20rpx 24rpx;
		border-top: 1rpx solid #eee;
		/* 顶部边框 */
	}
	
	.card_foot-item {
		font-size: 28rpx;
		color: #333;
	}
	
	.card_foot-item:last-child {
		color: #007AFF;
		/* 右侧文字蓝色 */
	}
</style>